<template>
  <div class="login-container">
    <h2 class="login-title">用户登录</h2>

    <van-cell-group inset>
      <!--      label="手机号"-->

      <van-field
          v-model="form.username"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
      >
        <template #left-icon>
          <van-icon name="contact"/>
        </template>
      </van-field>

      <!--                label="密码"-->
      <van-field
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      >
        <template #left-icon>
          <van-icon name="lock"/>
        </template>
        <template #button>
          <span @click="showForgotPassword">忘记密码？</span>
        </template>
      </van-field>
    </van-cell-group>

    <div class="options">
      <van-checkbox v-model="form.checked">记住密码</van-checkbox>

    </div>

    <van-button type="primary" block @click="submitLogin" style="margin-top: 20px;">
      登录
    </van-button>

    <div class="register-link">
      <!--      <p>没有账号？<a href="/register">立即注册</a></p>-->
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {basicNotify} from "@/components/basicFuncCom/basicNotify.js";

const router = useRouter()

const form = ref({
  username: '',
  password: '',
  rememberMe: false
})

const submitLogin = () => {
  if (!form.value.username || !form.value.password) {
    basicNotify.success('登录成功')

    return
  }

  // 模拟登录成功跳转
  console.log('提交登录:', form.value)

  basicNotify.success('登录成功')


  // 跳转到首页
  router.push('/')
}

const showForgotPassword = () => {
  basicNotify.primary('点击了忘记密码')

}
</script>

<style scoped>
.login-container {
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
}

.login-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

.register-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

.register-link a {
  color: #1989fa;
  text-decoration: none;
}
</style>
